import { useState, useEffect } from "react"
import ImgCrop from 'antd-img-crop'
import { Upload, Modal, message } from 'antd'

export default props => {
  const { value, onChange } = props
  // Upload使用fileList进行受控，会导致onChange只执行一次（详情参考#2423）
  const [fileList, setFileList] = useState([])
  const [title, setTitle] = useState('')
  const [show, setShow] = useState(false)

  useEffect(() => {
    if (value) {
      setFileList([{
        thumbUrl: `http://localhost:9999${value}`
      }])
    }
  }, [value])

  // 当fileList变化（图片上传时）
  const imgChange = ({ file, fileList }) => {
    // 解决Upload受控后只调用一次onChange的问题
    setFileList([...fileList])
    if (file.response) {
      onChange(file.response.data.img)
    }
  }

  // 删除上传好的图片，从fileList中移除
  const imgRemove = () => onChange('')

  // 预览图片
  const imgPreview = file => {
    setShow(true)
    setTitle(file.name || file.url.slice(file.url.lastIndexOf('/') + 1))
  }

  // 上传前检测
  const imgCheck = file => {
    const arr = ['image/png', 'image/jpg', 'image/jpeg']
    if (!arr.includes(file.type)) {
      message.error('只支持上传 png / jpg / jpeg 格式图片')
      return Promise.reject(file)
    }
    if (file.size / 1024 / 1024 > 2) {
      message.error('图片不能大于2M')
      return Promise.reject(file)
    }
    return Promise.resolve(file)
  }

  // 图片上传注意点：
  // 1.上传地址
  // 2.后端用什么字段来接收图片
  // 3.有时候上传要添加Token、Headers等字段，与axios封装无关，使用header属性
  return (
    <>
      <ImgCrop rotate>
        <Upload
          action="http://localhost:3000/api/v1/react/upload/img"
          name="good"
          headers={{ Authorization: localStorage.getItem('token') }}
          maxCount={1}
          listType="picture-card"
          fileList={fileList}
          onChange={imgChange}
          onRemove={imgRemove}
          onPreview={imgPreview}
          beforeUpload={imgCheck}
        >
          {!fileList.length && '+ Upload'}
        </Upload>
      </ImgCrop>
      <Modal
        visible={show}
        title={title}
        footer={null}
        onCancel={() => setShow(false)}
      >
        <img
          alt="example"
          style={{ width: '100%' }}
          src={`http://localhost:9999${value}`}
        />
      </Modal>
    </>
  )
}